<template>
  <div class="container">
    <div class="search-box">
      <van-search
        :value="keywordOn"
        placeholder="点击输入搜索内容"
        use-action-slot
        shape="round"
        @focus="onFocus"
        @change="onChangeVal"
        @search="onSearch"
        :autofocus="true"
        ref="searchBox">
        <div class="search-btn" size="small" slot="action" @tap="onSearch2">搜索</div>
      </van-search>
    </div>
    <div class="height-44"></div>
    <div class="main">
      <div v-if="searchMain" class="pad-l-13 pad-r-13 search-words">
        <scroll-view class="search-words-scroll" :scroll-y="true">
          <div class="height-12"></div>
          <div v-if="historyList.length && getCustomerId">
            <div class="flex flex-between">
              <h4 class="flex v-align-c toggle-bar" @click="moreList">
                <span>历史搜索</span>
                <icon class="iconfont icon-arrow-right font-10 mar-l-10" :class="longHide ? 'up' : 'down'"></icon>
              </h4>
              <img
                @click="clearHistory"
                v-if="fileSpace"
                :src="fileSpace + '/images/icon-deldata.png'"
                class="width-21 height-21" alt="">
            </div>          
            <div class="flex flex-wrap pad-t-18">
              <span v-show="item.show" v-for="(item, index) of historyList" :key="index" class="word-box mar-r-10 mar-b-16" @click="onSearch3(item.hotWord)">
                {{item.hotWord}}
              </span>
            </div>
          </div>
          <div v-if="hotWordsList.length || normalWordsList.length" class="pad-t-14">
            <h4>热门搜索</h4>
            <div class="flex flex-wrap pad-t-18">
              <template v-if="hotWordsList.length">
                <span class="word-box hot-word mar-r-10 mar-b-16" v-for="(item, index) of hotWordsList" :key="index" @click="onSearch3(item.hotWord)">
                  {{ item.hotWord }}
                </span>
              </template>
              <template v-if="normalWordsList.length">
                <span class="word-box mar-r-10 mar-b-16" v-for="(item, index) of normalWordsList" :key="index" @click="onSearch3(item.hotWord)">
                  <span>{{item.hotWord}}</span>
                </span>
              </template>
            </div>
          </div>
        </scroll-view>
      </div>
      <div
        v-if="listData.length"
        class="main-bar pull-refresh">
        <div>
          <div class="shop-bar" v-for="(item, index) in listData" :key="index" @click="pageTo(item)">
            <div class="img-item-box pos-rel">
              <!-- 跨境图标 -->
              <div class="cross-border-pic">
                <!-- 跨境保税 -->
                <img
                  v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 1"
                  :src="fileSpace + '/images/icon-cross-border.png'"
                  class="icon-cross-border"
                  alt="">
                <!-- 海外直邮 -->
                <img
                  v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 2"
                  :src="fileSpace + '/images/icon-cross-border-22.png'"
                  class="icon-cross-border"
                  alt="">
              </div>
              <div v-if="item.stock === 0" class="sell-out">
                <div class="del-layer align-c">
                  <div class="font-14">已售完</div>
                  <div class="font-9 mar-t--2">SOLD OUT</div>
                </div>
              </div>
              <img v-if="item.mainImage" :src="item.mainImage + '?imageView2/2/w/200'" mode="aspectFill" class="img-item"/>
            </div>
            <div class="content-item-box">
              <div class="content-title line-2">{{item.title}}</div>
              <div class="content-foot">
                <div v-if="item.income && item.income > 0 && getCustomerId">
                  <div class="self-buy">
                    <div class="self-buy-left">{{getAppInfo.commissionAlias || '分销赚'}}</div>
                    <div class="self-buy-right"><span style="color:#ffe200;">{{item.income}}</span>元</div>
                  </div>
                </div>
                <div class='price-row'>
                  <div class="price-box">
                    <span class='price'>¥{{ item.bestPrice }}</span>                    
                    <span class="old-parice" v-if="item.scribingPrice">￥{{ item.scribingPrice }}</span>
                  </div>
                  <div>
                    <img v-if="fileSpace" class="width-25 height-25" :src="fileSpace + '/images/shop-car.png'" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="nodata" v-if="shopSortNull">
          <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-274 height-65" alt="">
          <div class="align-c mar-t-20 font-16 font-color-6">
            暂无分类~
          </div>
        </div> -->
      </div>
    </div>
    <div class="nodata" v-if="searchNull">
        <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-375 height-91" alt="">
        <div class="align-c mar-t-20 font-16 font-color-6">
        暂时还没有您搜索的内容~
        </div>
    </div>
  </div>
</template>
<script>
import { pageUserGoodsByMemberId, getHotWordList } from '@/api/shop'
import { getAuthority } from '@/api/common'
export default {
  data() {
    return {
      changeKeyword: '',
      keywordOn: '',
      listQuery: {
        categoryId: '',
        keyWord: '',
        categoryType: '',
        memberId: '',
        customerId: '',
        upperShelfFlag: 1,
        currentPage: 1,
        size: 10
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      listData: [],
      searchNull: false, // 搜索数据是否为空
      shopSelectionAuthority: 0,
      getAppInfo: {},
      searchMain: true,
      historyList: [],
      hotWordsList: [],
      normalWordsList: [],
      parentHistoryList: [],
      longHide: true,
      isload: false
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    let wordsName = this.getCurrentPage().query.wordsName
    if (wordsName) {
      this.onSearch3(wordsName)
      this.changeKeyword = wordsName
      this.addStorageHistory()
    }
    this.getAppInfo = this.$pt.getStorageSync('appInfo')
    this.getAuthority()
    this.getHotWordList()
    if (Object.keys(this.$pt.getStorageSync('historyList')).length) {
      this.historyList = this.$pt.getStorageSync('historyList')
      this.longHide = true
      this.moreList()
      // if (this.historyList.length > 4) {
      //   this.longHide = false
      // }
    } else {
      this.historyList = []
    }
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageinit()
    }
  },
  methods: {
    getHotWordList() {
      getHotWordList({
        enterpriseId: this.getEnterpriseId ? this.getEnterpriseId : this.getAppInfo.enterpriseId,
        type: ''
      }).then(response => {
        if (response.isError) return
        this.hotWordsList = []
        this.normalWordsList = []
        if (response.data && response.data.length) {
          this.hotWordsList = response.data.filter(item => item.type === 2)
          this.normalWordsList = response.data.filter(item => item.type === 1)
        }
      }).catch(() => {
      })
    },
    getAuthority() {
      getAuthority({enterpriseId: this.getEnterpriseId}).then(response => {
        if (response.isError) return
        this.shopSelectionAuthority = response.data.shopSelectionAuthority
      }).catch(() => {
      })
    },
    pageinit() {
      this.listQuery.keyWord = this.keywordOn
      this.listQuery.memberId = this.getMemberId
      this.listQuery.customerId = this.getCustomerId
      this.listQuery.shopSelectionAuthority = this.shopSelectionAuthority
      // console.log('this.listQuery', this.listQuery.keyWord)
      pageUserGoodsByMemberId(this.listQuery).then(response => {
        if (response.isError) return
        response.data.records.forEach(item => {
          this.listData.push(item)
        })
        if (this.listData.length === 0) {
          this.searchNull = true
        }
        this.listQuery.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
        this.isload = false
      })
    },
    resetData() {
      // 重置数据
      this.searchNull = false
      this.listQuery.currentPage = 1
      this.listData = []
      this.pullLoad.finished = false
    },
    onSearch(e) {
      this.searchMain = false
      // 键盘直接搜索点击事件
      this.keywordOn = e.mp.detail
      this.resetData()
      this.pageinit()
      this.addStorageHistory()
    },
    onChangeVal(e) {
      this.keywordOn = e.mp.detail
      if (!this.keywordOn) {
        this.searchMain = true
      }
      this.changeKeyword = this.keywordOn
    },
    onFocus() {
      this.searchMain = true
    },
    onSearch2() {
      this.searchMain = false
      // 搜索按钮点击事件
      this.resetData()
      if (!this.isload) {
        this.isload = true
        this.pageinit()
      }
      this.addStorageHistory()
    },
    onSearch3(hotWord) {
      this.keywordOn = ''
      let that = this
      setTimeout(function() {
        that.keywordOn = hotWord
        that.searchMain = false
        // 搜索按钮点击事件
        that.resetData()
        that.pageinit()
        that.changeKeyword = hotWord
        that.addStorageHistory()
      }, 300)
    },
    addStorageHistory() {
      let obj = {
        hotWord: this.changeKeyword,
        show: true
      }
      let index = this.historyList.findIndex(item => {
        return item.hotWord === this.changeKeyword
      })
      if (index === -1 && this.getCustomerId && !this.$utils.isEmpty(this.changeKeyword)) {
        this.historyList.unshift(obj)
        this.$pt.setStorageSync('historyList', this.historyList)
      }
      this.openList()
    },
    clearHistory() {
      this.$pt.removeStorageSync('historyList')
      this.historyList = []
    },
    openList() {
      if (this.historyList.length) {
        this.historyList.forEach((item, index) => {
          item.show = false
          if (index === 0 || index === 1 || index === 2 || index === 3) {
            item.show = true
          }
        })
        this.longHide = false
      }
    },
    moreList() {
      if (this.historyList.length) {
        if (this.longHide) {
          this.historyList.forEach((item, index) => {
            item.show = false
            if (index === 0 || index === 1 || index === 2 || index === 3) {
              item.show = true
            }
          })
        } else {
          this.historyList.forEach(item => {
            item.show = true
          })
        }
        this.longHide = !this.longHide
      }
    },
    pageTo(item) {
      // 跳转详情页
      this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=' + item.goodsType})
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: white;
}
.search-words{
  position: fixed;
  left: 0;
  top: 38px;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 10;
  box-sizing: border-box;
  .search-words-scroll{
    width: 100%;
    height: calc(100vh - 60px);
  }
  h4{
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    color: #272727;
    &.toggle-bar{
      padding: 10px 15px 10px 0;
      margin: -10px 0;
    }
    .icon-arrow-right{
      font-weight: normal;
      transform:rotate(90deg);
      &.up{
        transform:rotate(-90deg);
      }
    }
  }
  .word-box{
    font-size: 14px;
    background: #f8f8f8;
    color: #272727;
    border-radius: 50px;
    padding: 0 13px;
    height: 22px;
    line-height: unset;
    &.hot-word{
      background: #fff3f3;
      color: #eb2828;
    }
  }
}
.search-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  z-index: 9;
  // 对搜索框进行改造
  /deep/ .van-search--show-action {
    background: unset !important;
    padding-right: unset;
  }
  /deep/ .van-cell {
    background: #f4f4f4;
    border-radius: 25px;
  }
  /deep/ .van-search__action {
    background: white;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }
}
.main {
  position: relative;
  z-index: 1;
  .main-bar {
    position: relative;
    padding: 0 15px 20px;
    margin-top: 10px;
    .shop-bar {
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 10px 13px;
      box-shadow: 0 4px 10px #dddddd;
      margin-top: 10px;
      border-radius: 5px;
      &:first-child{
        margin-top: unset;
      }
      .img-item-box {
        width: 100px;
        height: 100px;
        .img-item {
          width: 100px;
          height: 100px;
        }
        .sell-out{
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          color: rgba(254, 254, 254, .7);
          background: rgba(0, 0, 0, 0.5);
          font-size: 12px;
          .del-layer{
            border-radius: 50%;
            border: 1px solid white;
            justify-content: center;
            width: 60px;
            height: 60px;
          }
          .delete-css{
            position: absolute;
            transform: rotate(-45deg);
            background: rgba(255,255,255,0.58);
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            width: 100%;
            text-align: center;
            color: #000;
          }
        }
      }
      .content-item-box {
        width: 209px;
        height: 90px;
        padding: 5px 0;
        margin-left: 10px;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        .content-title {
          font-size: 14px;
          line-height: 18px;
          color: #333;
        }
        .content-foot {
          margin-top: 20px;
          .self-buy {
            height: 15px;
            text-align: center;
            display: flex;
            justify-content: left;
            align-items: center;
            .self-buy-left {
              background: #ffe200;
              font-size: 10px;
              color: #333;
              padding: 0 4px;
            }
            .self-buy-right {
              background: #000000;
              font-size: 10px;
              color: #fff;
              padding: 0 4px;
            }
          }
          .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .price-box {
              display: flex;
              justify-content: left;
              align-items: flex-end;
              .price {
                font-size: 19px;
                color: #ff0000;
                line-height: 1;
              }
              .old-parice {
                font-size: 12px;
                color: #333;
                text-decoration: line-through;
                margin-left: 5px;
                line-height: 1;
              }
            }
          }
        }
      }
    }
    .nodata {
      margin-top: 135px;
    }
  }
}
.nodata {
  margin-top: 115px;
}
</style>
